<template>
    <div class="main">
        <div id="ContentTop" ref="header">
            <div class="topleft" @click="backClick">
                {{ titleName }}
            </div>
        </div>
        <section style="margin-top:50px;">
            <!-- <div class="zk_list" :class="isShowPopMenu ? 'isSlide' : ''" v-show="isShowSubMenu" @click="showSortBoxClick">
                <span class="span_c">{{ sortText }}</span>
                <img :class="isShowPopMenu ? 'trans' : ''" id="ctr" src="../../images/sq2.png" style="width:16px;">
            </div> -->
            <div class="contents" ref="testSction">
                <div class="div_list" v-for="(item, index) in arrHTML" @click="goDoExam(item)">
                    <p>{{ index + 1 }}. <em v-html="item.name"></em></p>
                </div>
            </div>
        </section>
        <!-- 排序框 -->
        <div class="showSortBox" v-show="isShowPopMenu" ref="sortBox">
            <ul>
                <li v-for="(item, index) in sortList" @click="sortListBtns(item.value, $event)" :class="{'span_c': index == navActive}" :data-index="index">{{ item.text }}</li>
            </ul>
            <div @click="showSortBoxClick('set')"></div>
        </div>
    </div>
</template>
<script>
import { setStore, getStore, removeStore } from "../../config/mUtils";
import { getChapterList, getFavList, geterrorRankList, getRandomList } from "../../config/getData";
import G_SetTestInfo from '../DoExam/data/yingSoftSetTest';
import initArrAllTest from './initArrAllTest';
import jsonData from "../json/fixedJSON";
export default {
    data: function() {
        return {
            zhinengList: {},
            collection: {},
            errorRank: {},
            titleName: '', // 标题名
            arrHTML: null, // 试题列表
            isShowSubMenu: false, // 是否显示排序按钮
            _searchText: '', // url参数titlename
            isShowPopMenu: false, // 是否显示弹框
            navActive: 0, // 排序默认指针
            sortText: '来源',
            sortList: [{ // 排序规则
                    text: '来源',
                    value: 0
                },
                {
                    text: '时间',
                    value: 1
                },
                {
                    text: '错次',
                    value: 0
                },
                {
                    text: '错误类型',
                    value: 1
                },
                {
                    text: '难易度系数',
                    value: 0
                },
                {
                    text: '考试权重',
                    value: 1
                },
                {
                    text: '是否添加备注',
                    value: 0
                }
            ]
        }
    },
    methods: {
        onLoad() {
            let _that = this;
            _that._searchText = _that.$route.query.titlename;
            switch (_that._searchText) {
                case 'znlx':
                    _that.titleName = '智能练习';
                    break;
                case 'nttz':
                    _that.titleName = '难题挑战';
                    break;
                case 'sc':
                    _that.titleName = '收藏题';
                    break;
                case 'xxct':
                    _that.titleName = '线下传题';
                    break;
                default:
                    _that.titleName = '固定练习';
                    _that.isShowSubMenu = true;
                    break;
            }
            this.showHTMLTemplate();
        },
        async showHTMLTemplate() {
            let _arr = [],
                _appEName = getStore('ExamType'),
                _that = this;
            if (_that._searchText == 'znlx') {
                await getRandomList().then(res => {
                    let jsonData = res;
                    if (jsonData.status === 200) {
                        //接收数据
                        if (jsonData.data.count == 0) {
                            _arr = [];
                        } else {
                            let _examHistoryID = jsonData.data.examHistoryID;
                            // _that.collection = jsonData.data.test;
                            let _arrUserTest = jsonData.data.info;
                            // _titleCount = jsonData.data.count;

                            _that.zhinengList = G_SetTestInfo.replaceImgURL(jsonData.data.test);
                            _that.zhinengList = initArrAllTest(_that.zhinengList, _arrUserTest, _examHistoryID);
                            _arr = _that.compressArr(_that.zhinengList, 'fav');
                        }
                    }
                });
            } else if (_that._searchText == 'nttz') {
                await geterrorRankList().then(res => {
                    let jsonData = res;
                    if (jsonData.status === 200) {
                        //接收数据
                        if (jsonData.data.count == 0) {
                            _arr = [];
                        } else {
                            let _examHistoryID = jsonData.data.examHistoryID;
                            // _that.collection = jsonData.data.test;
                            let _arrUserTest = jsonData.data.info;
                            // _titleCount = jsonData.data.count;

                            _that.errorRank = G_SetTestInfo.replaceImgURL(jsonData.data.test);
                            _that.errorRank = initArrAllTest(_that.errorRank, _arrUserTest, _examHistoryID);
                            _arr = _that.compressArr(_that.errorRank, 'fav');
                        }
                    }
                });
            } else if (_that._searchText == 'sc') {
                await getFavList(_appEName).then(res => {
                    let jsonData = res;
                    if (jsonData.status === 200) {
                        //接收数据
                        if (jsonData.data.count == 0) {
                            _arr = [];
                        } else {
                            let _examHistoryID = jsonData.data.examHistoryID;
                            // _that.collection = jsonData.data.test;
                            let _arrUserTest = jsonData.data.info;
                            // _titleCount = jsonData.data.count;

                            _that.collection = G_SetTestInfo.replaceImgURL(jsonData.data.test);
                            _that.collection = initArrAllTest(_that.collection, _arrUserTest, _examHistoryID);
                            _arr = _that.compressArr(_that.collection, 'fav');
                        }
                    }
                });
            } else if (_that._searchText == 'xxct') {
                let jsonxxct = null;
                // jsonxxct = {
                //     "list": [{
                //             "note": "234",
                //             "subject": "收到了福克斯两块阿里空间上的浪费空间上来的离开教室里打开肌肤肯德基两块的浪费空间上的浪费空间拉近了多少空间里说看见对方空间的浪费空间上的浪费空间里看见看",
                //             "imgUrl": "\/storage/102102.jpg",
                //             "id": "20180625171440",
                //             "tag": '12312'
                //         },
                //         {
                //             "note": "",
                //             "subject": "这是第二条列表数据，这是一个列表循环安卓原生方法数据",
                //             "imgUrl": "\/storage/102102.jpg",
                //             "id": "20180626171440"
                //         },
                //         {
                //             "note": "",
                //             "subject": "这是第三条列表数据，这是一个列表循环安卓原生方法数据",
                //             "imgUrl": "\/storage/102102.jpg",
                //             "id": "20180627171440"
                //         },
                //         {
                //             "note": "",
                //             "subject": "这是第四条列表数据，这是一个列表循环安卓原生方法数据",
                //             "imgUrl": "\/storage/102102.jpg",
                //             "id": "20180628171440"
                //         }
                //     ]
                // }
                if (window.android) {
                    if (window.android.getListInfo) {
                        jsonxxct = window.android.getListInfo();
                        jsonxxct = JSON.parse(jsonxxct);
                    }
                }
                if (!jsonxxct || jsonxxct === '') {
                    _that.$vux.alert.show({
                        content: '试题列表为空！',
                        title: '温馨提示',
                        onHide() {
                            _that.$router.push('/problemSet');
                        }
                    });
                    return;
                }
                _arr = _that.compressArr(jsonxxct);
            } else {
                await getChapterList(_appEName).then(res => {
                    let dataJson = JSON.parse(res.data.ChapterMenuJson);
                    _arr = dataJson.Childs[0].Childs[0].Childs;
                });
                _arr = _that.compressArr(_arr, 'api');
            }
            if (_arr.length <= 0) {
                _that.$vux.alert.show({
                    content: '试题列表为空！',
                    title: '温馨提示',
                    onHide() {
                        _that.$router.push('/problemSet');
                    }
                });
                return;
            }
            _that.arrHTML = _arr;
        },
        compressArr(data, api) {
            let arr = [];
            if (api) {
                data = data;
            } else {
                data = data.list;
            }
            for (let i = 0; i < data.length; i++) {
                if (api) {
                    if (api == 'api') {
                        arr.push({ 'name': data[i].Name, 'age': data[i].ID });
                    } else if (api === 'fav') {
                        let allTestID = data[i].childTableID === -1 ? data[i].allTestID : data[i].allTestID + '' + data[i].childTableID;
                        arr.push({ 'name': data[i].title, 'age': data[i].cptID, 'allTestID': allTestID });
                    }
                } else {
                    if (data[i].subjectName !== localStorage.getItem('ExamType')) {
                        continue;
                    }
                    arr.push({ 'name': data[i].subject, 'age': data[i].id });
                }
            }
            return arr;
        },
        goDoExam(str) {
            let _that = this;
            if (_that._searchText == 'xxct') {
                _that.$router.replace('/doexam?photoID=' + Number(str.age) + '&name=' + _that._searchText);
            } else if (_that._searchText == 'sc' || _that._searchText == 'nttz' || _that._searchText == 'znlx') {
                _that.$router.replace('/doexam?name=' + _that._searchText + '&cptID=' + str.age + '&allTestID=' + str.allTestID);
            } else {
                _that.$router.replace('/doexam?name=' + _that._searchText + '&cptID=' + str.age);
            }
        },
        backClick() {
            this.$router.push('/problemSet');
        },
        showSortBoxClick(value) {
            if (value === 'set') {
                this.isShowPopMenu = false;
            } else {
                this.isShowPopMenu = !this.isShowPopMenu;
            }
            document.getElementsByTagName("body")[0].style.overflow = this.isShowPopMenu ? 'hidden' : 'auto';
        },
        sortListBtns(value, event) {
            var _that = this;
            switch (value) {
                case 0:
                    _that.arrHTML.sort(_that.compareUp('age', 'down'));
                    break;
                default:
                    _that.arrHTML.sort(_that.compareUp('age', 'up'));
                    break;
            }
            var target = event.target;
            var index = Number(target.getAttribute("data-index"));
            _that.navActive = index;
            _that.sortText = target.innerHTML;
            _that.showSortBoxClick('set');
        },
        compareUp(property, gl) {
            return function(a, b) {
                var value1 = a[property];
                var value2 = b[property];
                if (gl === 'up') {
                    //大到小
                    return value2 - value1;
                } else {
                    return value1 - value2;
                }
            }
        },
        setSortBoxCss() {
            var winH = window.innerHeight,
                headH = jQuery('#ContentTop').height(),
                btnH = jQuery('.zk_list').outerHeight();
                jQuery('.showSortBox').css({ 'top': btnH + headH - jQuery('body').scrollTop() }).find('div').css({
                'top': headH + btnH
            });
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
        }
    },
    created: function() {
        this.onLoad();
    },
    mounted: function() {
        this.setSortBoxCss();
    }
}

</script>
<style scoped lang="less">
section {
    margin-top: 50px;
    .zk_list {
        /*display: none;*/
        border-bottom: 1px solid #eee;
        text-align: center;
        padding: 15px;
        font-size: 1.4rem;
        .trans {
            transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            /* IE 9 */
            -moz-transform: rotate(180deg);
            /* Firefox */
            -webkit-transform: rotate(180deg);
            /* Safari 和 Chrome */
            -o-transform: rotate(180deg);
            /* Opera */
        }
    }
}

.div_list {
    border-bottom: 1px solid #eee;
    p {
        padding: 10px 15px;
        display: inline-block;
        line-height: 25px;
        color: #000;
        font-size: 1.4rem;
    }
}

.span_c {
    color: #ed7a2f;
}

.showSortBox {
    position: fixed;
    width: 100%;
    left: 0;
    /*display: none;*/
    background: #fff;
    div {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 51px;
        background: #000;
        opacity: .6;
        z-index: 9;
    }
    ul {
        background: #fff;
        margin: 0;
        padding: 0;
        z-index: 10;
        li {
            font-size: 1.4rem;
            padding: 15px 20px;
            border: none;
            text-align: left;
            border-bottom: 1px solid #f3f3f3;
            &.span_c {
                color: #ed7a2f;
                background: url("../../images/xz.png") no-repeat 92%;
                background-size: 20px;
            }
        }
    }
}

.showSortBox div {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 51px;
    background: #000;
    opacity: .6;
    z-index: 9;
}

.showSortBox ul {
    background: #fff;
    margin: 0;
    padding: 0;
    z-index: 10;
    position: relative;
}

.showSortBox ul li {
    padding: 15px 20px;
    border: none;
    text-align: left;
    border-bottom: 1px solid #f3f3f3;
}

.showSortBox ul li.span_c {
    color: #ed7a2f;
    background: url("../../images/xz.png") no-repeat 92%;
    background-size: 20px;
}

#ContentTop {
    position: fixed;
    _position: absolute;
    top: 0;
    left: 0px;
    z-index: 1;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .topleft {
        float: left;
        width: 100%;
        background: url("../../images/back.png") no-repeat 12px;
        background-size: 10px 20px;
        color: #333;
        text-align: center;
        overflow: hidden;
        font-size: 2rem;
        /*padding-left: 10%;*/
        cursor: pointer;
    }
}

</style>
